<script>
export default {
  name: "superMapForMapboxGLBaseMap"
}
</script>

<script setup>
import {ref, onMounted} from "vue";

import mapboxgl from 'mapbox-gl';
import '@supermapgis/iclient-mapboxgl';

onMounted(() => {
  initMap();
})

let map;

function initMap() {
  map = new mapboxgl.Map({
    container: 'superMapForMapboxGLBaseMapBox',
    style: {
      "version": 8,
      "sources": {
        "raster-tiles": {
          // "attribution": attribution,
          "type": "raster",
          "tiles": ['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
          "tileSize": 256
        }
      },
      "layers": [{
        "id": "simple-tiles",
        "type": "raster",
        "source": "raster-tiles",
        "minzoom": 0,
        "maxzoom": 22
      }]
    },
    center: [120.143, 30.236], // 地图初始中心点
    zoom: 3 // 地图初始缩放级别
  })

  map.addControl(new mapboxgl.NavigationControl(), 'top-left');
}
</script>

<template>
  <div class="baseMapBox" id="superMapForMapboxGLBaseMapBox"></div>
</template>

<style scoped lang="less">
.baseMapBox {
  width: 100vw;
  height: 100vh;
}
</style>
